<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>oppo网站</title>
<link rel="stylesheet" type="text/css" href="images/public.css" />
<link rel="stylesheet" type="text/css" href="images/butifulDemo.css" />
</head>
  <body>
		<div id="top" class="auto">
      	<div class="nav">
         	<div class="left same"><img src="images/mainnav_l.gif"/></div>
            
            <div class="mainNav">
               <img class="logo" src="images/logo.gif" />
               <ul>
                  <li><a href="butifulDemo.html">首页</a></li>
                  <li><a href="list.html">手机</a></li>
                  <li><a href="details.html">电脑</a></li>
                  <li><a href="#">平板</a></li>
                  <li><a href="#">电视</a></li>
               </ul>
            </div>
            
            <div class="right same"><img src="images/mainnav_r.gif"/></div>
         </div>
         
         <div class="nav1">
            <form class="search" action="">
            	<input class="keywords" type="text" name="keywords" />
               <input class="btn" type="submit"value="" />
            </form>
         
         	<div class="enter">
            	<a href="#">登录</a>|
               <a href="#">注册</a>　　<!-- 注册后面有个全角空格 -->
               <img src="images/shoppingcart_sicon.png"/>  
               <a class="cart" href="#">购物车0件</a>
            </div>
         </div>
      </div>
      
      <div id="main">
      	<div class="auto">
         	<img class="mainImg" width="956px" src="images/20130508roclam.jpg"/>
        		<div class="shopList">
               <div class="title">
                  <h2>精品推荐</h2>
                  <a href="#">更多&gt&gt</a>
               </div>
            
               <div class="box">
                  <div class="imgList">
                     <a href="#"><img width="160px" height="160px" src="images/75_thumb_G_1364283137730.jpg" /></a>
                     <p class="listDesc"><a href="#">Find 5 七彩家族系列保护壳</a></p>
                     <p class="listPrice">￥68</p>
                  </div>
                  <div class="imgList">
                     <a href="#"><img width="160px" height="160px" src="images/75_thumb_G_1364283137730.jpg" /></a>
                     <p class="listDesc"><a href="#">Find 5 七彩家族系列保护壳</a></p>
                     <p class="listPrice">￥68</p>
                  </div>
                  <div class="imgList">
                     <a href="#"><img width="160px" height="160px" src="images/75_thumb_G_1364283137730.jpg" /></a>
                     <p class="listDesc"><a href="#">Find 5 七彩家族系列保护壳</a></p>
                     <p class="listPrice">￥68</p>
                  </div>
                  <div class="imgList imgListLast">
                     <a href="#"><img width="160px" height="160px" src="images/75_thumb_G_1364283137730.jpg" /></a>
                     <p class="listDesc"><a href="#">Find 5 七彩家族系列保护壳</a></p>
                     <p class="listPrice">￥68</p>
                  </div>
                  
                  <!-- 或者在这里清除浮动 <div style="clear:both;"> </div> -->
               </div>
             </div> 
             
             <div class="shopList">
               <div class="title">
                  <h2>新品上架</h2>
                  <a href="#">更多&gt&gt</a>
               </div>
            	<!-- imgList设置为浮动 由于box没有设置高度，所以box的高度为0 shopList的高度仅仅只有title的高度-->
               <div class="box">
                  <div class="imgList">
                     <a href="#"><img width="160px" height="160px" src="images/75_thumb_G_1364283137730.jpg" /></a>
                     <p class="listDesc"><a href="#">Find 5 七彩家族系列保护壳</a></p>
                     <p class="listPrice">￥68</p>
                  </div>
                  <div class="imgList">
                     <a href="#"><img width="160px" height="160px" src="images/75_thumb_G_1364283137730.jpg" /></a>
                     <p class="listDesc"><a href="#">Find 5 七彩家族系列保护壳</a></p>
                     <p class="listPrice">￥68</p>
                  </div>
                  <div class="imgList">
                     <a href="#"><img width="160px" height="160px" src="images/75_thumb_G_1364283137730.jpg" /></a>
                     <p class="listDesc"><a href="#">Find 5 七彩家族系列保护壳</a></p>
                     <p class="listPrice">￥68</p>
                  </div>
                  <div class="imgList imgListLast">
                     <a href="#"><img width="160px" height="160px" src="images/75_thumb_G_1364283137730.jpg" /></a>
                     <p class="listDesc"><a href="#">Find 5 七彩家族系列保护壳</a></p>
                     <p class="listPrice">￥68</p>
                  </div>
               </div>
             </div> 
             
             <div class="brand">
             	<img src="images/bottom.jpg" usemap="#brandImg" />    
               <map id="brandImg" name="brandImg">
               	<area shape="rect" href="http://www.sifangku.com" coords="0,0,108,50" target="_blank" alt="私房库"/>
               <area shape="rect" href="http://www.baidu.com" coords="108,0,283,50" target="_blank" alt="百度"/>
               </map>
             </div>
         </div>
      </div>
      
      <div id="bottom">
      	<p>联系QQ 1435785971</p>     
         <p>powered by <a href="http://www.sifangku.com">私房库</a></p>
      </div>
  </body>
</html>